@import "Variables.scss";

.hideNavigation #navigation button.showNavigation {
  min-width: 2.5em;
  display: flex;
  border-top-right-radius: $radius;
}

.disableAnimations.hideNavigation #navigation,
.disableAnimations #navigation {
  transition: none;
  button.showNavigation {
    transition: none;
  }
}

#navigation {
  width: 5em;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100vh;
  background: $lighter-grey;
  display: flex;
  flex-direction: column;
  transition: left 0.3s ease;
  div {
    font-weight: bold;
    line-height: 5em;
    text-align: center;
    color: white;
    background: linear-gradient(0.33turn, #1b5551, #813e93);
  }
  button.showNavigation {
    width: 2.5em;
    height: 5em;
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
    background: white;
    color: $dark-grey;
    z-index: 10;
    transition: width 0.3s ease;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    &:hover {
      width: 5em;
    }
  }
  button {
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    min-width: 5em;
    min-height: 5em;
    background: none;
    font-size: 1em;
    &.break {
      margin-top: auto;
    }
    svg {
      color: $dark-grey;
    }
    &:hover, &:active, &.active {
      background: $light-grey;
    }
    &:focus-visible {
      background: $mid-grey;
      border-color: $mid-grey;
    }
  }
}

.darkTheme {
  #navigation {
    background: $darker-grey;
    button {
      border-color: rgba(255, 255, 255, 0.05) !important;
      svg {
        color: $mid-grey;
      }
      &:hover, &:active, &.active {
        background: #3B3B3B;
      }
      &:focus-visible {
        background: #3B3B3B;
      }      
    }
  }
}